<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/publish' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查看轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 顶部搜索栏 -->
    <el-card>
      <div class="function-lan">
        <div class="search-for">
          <el-input
            class="search-for-ipt"
            clearable
            @clear="getBannerList"
            prefix-icon="el-icon-search"
            v-model="bannerInfo.query"
            placeholder="请输入内容进行搜索"
          ></el-input>
        </div>
      </div>
    </el-card>
    <!-- banner详情 -->
    <el-card>
      <el-table :data="bannerList" style="width: 100%" border stripe>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="Banner标题">
                <span>{{ props.row.title }}</span>
              </el-form-item>
              <el-form-item label="Banner ID">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="Banner play">
                <span>{{ props.row.play }}</span>
              </el-form-item>
              <el-form-item label="Banner 创建时间">
                <span>{{ props.row.create_time | moment }}</span>
              </el-form-item>
              <el-form-item label="Banner 内容">
                <span>{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item label="Banner图片">
                <span>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.cover"
                    fit="fill"
                  ></el-image>
                </span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          :formatter="dateFormat"
          label="Banner 创建时间"
          prop="create_time"
        >
        </el-table-column>
        <el-table-column label="Banner ID" prop="id"> </el-table-column>
        <el-table-column label="Banner标题" prop="title"> </el-table-column>
        <el-table-column
          label="Banner内容"
          prop="content"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
// import { dateFormat } from "@/function/timeFormat/timeFormat.js";
export default {
  data() {
    return {
      bannerInfo: {
        query: "",
        // 当前页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 2,
      },
      bannerList: [],
    };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    async getBannerList() {
      let self = this;
      const res = await self.$get("/slide", {
        page_number: self.bannerInfo.pagenum,
      });
      console.log(res.result);
      this.bannerList = res.result;
      console.log(this.bannerList);
    },
    showInfoDialog() {},
    // 修改轮播图
    async handleEdit(index, row) {
      console.log(index, row);
      const res = await self.$put("/slide", {
        id: self.bannerList.id,
        title: self.bannerList.title,
        cover: self.bannerList.cover,
        content: self.bannerList.content,
      });
      console.log(res);
    },
    // 删除轮播图
    async handleDelete(index, row) {
      console.log(index, row);
      let self = this;
      const res = await self.$Delete("/slide", {
        id: self.bannerList.id,
      });
      console.log(res);
    },
    // 时间格式化
    dateFormat(row, column) {
      // dateFormat();
      // console.log(row, column);
      var date = row[column.property];
      if (date == undefined) return "";
      return this.$moment.unix(date).format("YYYY-MM-DD HH:mm:ss");
    },
  },
};
</script>
<style lang="scss">
.form-label {
  width: 90px;
  color: #99a9bf;
}
</style>